<template>
  <div class="user-list-container">
    <div class="page-header">
      <h2>用户管理列表</h2>
      <button @click="handleAddUser" class="add-btn">新增用户</button>
    </div>
    
    <div class="search-bar">
      <input 
        type="text" 
        v-model="searchKey" 
        placeholder="请输入用户名搜索"
        @keyup.enter="handleSearch"
      >
      <button @click="handleSearch">搜索</button>
    </div>
    
    <table class="user-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>邮箱</th>
          <th>角色</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in filteredUsers" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role }}</td>
          <td>
            <span class="status-tag" :class="user.status">{{ user.status === 'active' ? '活跃' : '禁用' }}</span>
          </td>
          <td class="action-buttons">
            <button @click="handleViewDetail(user.id)" class="view-btn">查看</button>
            <button @click="handleEdit(user.id)" class="edit-btn">编辑</button>
            <button @click="handleDelete(user.id)" class="delete-btn">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchKey = ref('')

// 模拟用户数据
const users = ref([
  { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员', status: 'active' },
  { id: 2, name: '李四', email: 'lisi@example.com', role: '普通用户', status: 'active' },
  { id: 3, name: '王五', email: 'wangwu@example.com', role: '普通用户', status: 'inactive' },
  { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '访客', status: 'active' }
])

// 筛选用户
const filteredUsers = computed(() => {
  if (!searchKey.value) return users.value
  return users.value.filter(user => 
    user.name.toLowerCase().includes(searchKey.value.toLowerCase())
  )
})

// 搜索处理
const handleSearch = () => {
  console.log('搜索关键词:', searchKey.value)
}

// 查看详情
const handleViewDetail = (id) => {
  router.push(`/detail/${id}`)
  
  // 向主应用发送当前查看的用户ID
  if (window.mainActions) {
    window.mainActions.setGlobalState({
      currentUserId: id
    })
  }
}

// 编辑用户
const handleEdit = (id) => {
  alert(`编辑用户 ${id}`)
}

// 删除用户
const handleDelete = (id) => {
  if (confirm(`确定要删除用户 ${id} 吗？`)) {
    users.value = users.value.filter(user => user.id !== id)
  }
}

// 新增用户
const handleAddUser = () => {
  alert('新增用户')
}
</script>

<style scoped>
.user-list-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.add-btn {
  padding: 8px 16px;
  background-color: #165DFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.search-bar input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-width: 300px;
}

.search-bar button {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-table th,
.user-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.user-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.status-tag {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.status-tag.active {
  background-color: rgba(52, 199, 89, 0.1);
  color: #34c759;
}

.status-tag.inactive {
  background-color: rgba(255, 59, 48, 0.1);
  color: #ff3b30;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.view-btn, .edit-btn, .delete-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.view-btn {
  background-color: #e8f4fd;
  color: #007aff;
}

.edit-btn {
  background-color: #fff8e6;
  color: #ff9500;
}

.delete-btn {
  background-color: #ffebee;
  color: #ff3b30;
}
</style>
